<template>
  <view
    :class="[
      'xin-tag-abtn',
      color,
      {
        can: clickable,
        'xin-tag-abtn-active': selected,
      },
    ]"
    hover-class="xin-tag-abtn-hover"
    :hover-stay-time="300"
    @click="clickEvent"
  >
    <rich-text
      :class="['iconfont', {plus}]"
      v-if="icon"
      :nodes="icon"
    />
    <text class="text" v-if="content">{{content || ''}}</text>
  </view>
</template>

<script>

export default {
  props: {
    color: {
      type: String,
      default: 'gray'
    },
    icon: {
      type: String,
      default: ''
    },
    plus: {
      type: Boolean,
      default: false,
    },
    clickable: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: ''
    },
    selected: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    }
  },
  filters: {
  },
  mounted() {
  },
  onReachBottom() {
  },
  methods: {
    clickEvent () {
      if (!this.clickable) return
      this.$emit('click')
    },
  }
}
</script>

<style>
.xin-tag-abtn {
  line-height: 68rpx;
  margin: 9rpx;
  border-radius: 18rpx;
  padding: 0 32rpx;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  user-select: none;
}
.xin-tag-abtn .iconfont {
  font-size: 36rpx;
  margin-right: 9rpx;
}
.xin-tag-abtn .iconfont.plus {
  margin-right: 0;
}
.xin-tag-abtn .text {
  font-size: 26rpx;
}
.xin-tag-abtn.xin-tag-abtn-active {
  background-image: linear-gradient(135deg, #444444, #222222);
  color: #ffffff;
}
.xin-tag-abtn.gray {
  background-image: linear-gradient(135deg, rgba(68, 68, 68, 0.15), rgba(34, 34, 34, 0.15));
  box-shadow: 5rpx 5rpx 15rpx rgba(34, 34, 34, 0.1);
  color: #222222;
}
.xin-tag-abtn.gray.can.xin-tag-abtn-hover {
  background-image: linear-gradient(135deg, #444444, #222222);
  color: #ffffff;
}
.xin-tag-abtn.gray.xin-tag-abtn-active {
  background-image: linear-gradient(135deg, #444444, #222222);
  color: #ffffff;
}
.xin-tag-abtn.blue {
  background-image: linear-gradient(135deg, rgba(34, 183, 255, 0.15), rgba(0, 149, 255, 0.15));
  box-shadow: 5rpx 5rpx 15rpx rgba(0, 149, 255, 0.1);
  color: #0095ff;
}
.xin-tag-abtn.blue.can.xin-tag-abtn-hover {
  background-image: linear-gradient(135deg, #22b7ff, #0095ff);
  color: #ffffff;
}
.xin-tag-abtn.blue.xin-tag-abtn-active {
  background-image: linear-gradient(135deg, #22b7ff, #0095ff);
  color: #ffffff;
}
.xin-tag-abtn.red {
  background-image: linear-gradient(135deg, rgba(255, 136, 136, 0.15), rgba(255, 102, 102, 0.15));
  box-shadow: 5rpx 5rpx 15rpx rgba(255, 102, 102, 0.1);
  color: #ff6666;
}
.xin-tag-abtn.red.can.xin-tag-abtn-hover {
  background-image: linear-gradient(135deg, #ff8888, #ff6666);
  color: #ffffff;
}
.xin-tag-abtn.red.xin-tag-abtn-active {
  background-image: linear-gradient(135deg, #ff8888, #ff6666);
  color: #ffffff;
}
.xin-tag-abtn.yellow {
  background-image: linear-gradient(135deg, rgba(255, 205, 100, 0.15), rgba(247, 171, 66, 0.15));
  box-shadow: 5rpx 5rpx 15rpx rgba(247, 171, 66, 0.1);
  color: #f7ab42;
}
.xin-tag-abtn.yellow.can.xin-tag-abtn-hover {
  background-image: linear-gradient(135deg, #ffcd64, #f7ab42);
  color: #ffffff;
}
.xin-tag-abtn.yellow.xin-tag-abtn-active {
  background-image: linear-gradient(135deg, #ffcd64, #f7ab42);
  color: #ffffff;
}
.xin-tag-abtn.green {
  background-image: linear-gradient(135deg, rgba(55, 225, 163, 0.15), rgba(21, 191, 129, 0.15));
  box-shadow: 5rpx 5rpx 15rpx rgba(21, 191, 129, 0.1);
  color: #15bf81;
}
.xin-tag-abtn.green.can.xin-tag-abtn-hover {
  background-image: linear-gradient(135deg, #37e1a3, #15bf81);
  color: #ffffff;
}
.xin-tag-abtn.green.xin-tag-abtn-active {
  background-image: linear-gradient(135deg, #37e1a3, #15bf81);
  color: #ffffff;
}

</style>

<style lang="less">
  // 源码修改可以在这里
  // 尺寸
  @font-size: 26rpx;
  @space-width: 18rpx;
  @radius-width: 18rpx;
  // 颜色
  @color-gray: #222222;
  @color-blue: #0095ff;
  @color-green: #15bf81;
  @color-yellow: #f7ab42;
  @color-red: #ff6666;
  @color-background: #f6f7ff;
  // 方法
  .shadow (@color: @color-gray, @x: 5rpx, @y: 5rpx, @r: 15rpx, @o: 3) {
    box-shadow: @x @y @r fade(@color, @o);
  }
  .xin-tag-abtn {
    line-height: 68rpx;
    margin: @space-width / 2;
    border-radius: @radius-width;
    padding: 0 @space-width + 14rpx;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    user-select: none;
    .iconfont {
      font-size: @font-size + 10rpx;
      margin-right: @space-width / 2;
      &.plus {
        margin-right: 0;
      }
    }
    .text {
      font-size: @font-size;
    }
    &.xin-tag-abtn-active {
      background-image: linear-gradient(135deg, fade(@color-gray + #222222, 100), fade(@color-gray, 100));
      color: #ffffff;
    }
    .colorFunc (@color) {
      background-image: linear-gradient(135deg, fade(@color + #222222, 15), fade(@color, 15));
      .shadow(@color, @o: 10);
      color: @color;
      &.can {
        &.xin-tag-abtn-hover {
          background-image: linear-gradient(135deg, fade(@color + #222222, 100), fade(@color, 100));
          color: #ffffff;
        }
      }
      &.xin-tag-abtn-active {
        background-image: linear-gradient(135deg, fade(@color + #222222, 100), fade(@color, 100));
        color: #ffffff;
      }
    }
    &.gray {
      .colorFunc(@color-gray);
    }
    &.blue {
      .colorFunc(@color-blue);
    }
    &.red {
      .colorFunc(@color-red);
    }
    &.yellow {
      .colorFunc(@color-yellow);
    }
    &.green {
      .colorFunc(@color-green);
    }
  }
</style>
